<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../static/js/jquery-3.6.4.min.js"></script>
    <script src="../static/bootstrap-3.4.1-dist/bootstrap/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title id="ti">查询结果</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1-dist/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/dcalendar.picker.css"/>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/sort.js"></script>
    <script>
        //请看这里
        //模拟输入
      //用来模拟前端传的数据，但是失败
  //用来模拟前端传的数据，但是失败

 /* input = [{"hname": "aaa", "star": "4", "point": "1"}, {
            "hname": "aaa",
            "star": "4",
            "point": "2"
        }, {"hname": "aaa", "star": "3", "point": "3"}, {"hname": "aaa", "star": "4", "point": "4"}, {
            "hname": "aaa",
            "star": "4",
            "point": "5"
        }, {"hname": "aaa", "star": "4", "point": "6"}, {"hname": "aaa", "star": "4", "point": "7"}, {
            "hname": "aaa",
            "star": "4",
            "point": "8"
        }, {"hname": "aaa", "star": "4", "point": "5"}, {"hname": "aaa", "star": "4", "point": "5"}, {
            "hname": "aaa",
            "star": "4",
            "point": "5"
        }, {"hname": "aaa", "star": "4", "point": "5"}, {"hname": "aaa", "star": "4", "point": "5"}, {
            "hname": "aaa",
            "star": "4",
            "point": "5"
        }, {"hname": "aaa", "star": "4", "point": "15"}, {"hname": "aaa", "star": "4", "point": "16"}, {
            "hname": "aaa",
            "star": "4",
            "point": "17"
        }, {"hname": "aaa", "star": "4", "point": "18"}, {"hname": "aaa", "star": "4", "point": "19"}, {
            "hname": "aaa",
            "star": "19",
            "point": "20"
        }]; */
        var input={{test1|tojson }}//接收前端输入数据
        json=input


    </script>
    <style>

        .navbar-default .navbar-brand {
            color: #fff;
            font-size: 30px;
            padding-left: 30px

        }

        .navbar-default .navbar-text {
            margin-top: 15px;
            color: #fff;
        }

        .navbar-text {
            color: #fff;
            font-size: 15px
        }

        .nav nav-tabs {
            background-color: #003b95;
        }

        .content-sec3 {
            position: relative;
            max-width: 100%;
            height: auto;
            background: url('../static/img/headerpic.jpeg') no-repeat top center;
            background-size: 100% auto;
            background-color: cadetblue;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        .titleImg {
            width: 200px;
            height: 200px;
            object-fit: cover;
            flex: 1;
        }

        /* Navigation bar */
        .navbar-default {
            background-color: #003B95;
            border-color: #003B95;
            color: #fff;
            font-size: 16px;
        }

        .navbar-default .navbar-brand {
            color: #fff;
            font-size: 30px;
            padding-left: 30px;
        }

        .navbar-default .navbar-text,
        .navbar-default .navbar-nav > li > a {
            color: #fff;
            font-size: 16px;
            font-weight: 500;
        }

        .navbar-default .navbar-text {
            margin-top: 15px;
        }

        /* Breadcrumb */
        .breadcrumb {
            background-color: #fff;
            margin-bottom: 10px;
            padding: 8px 15px;
            border-radius: 4px;
        }

        .breadcrumb > li + li:before {
            content: ">";
            padding: 0 5px;
            color: #ccc;
        }

        /* Left column */
        #left {
            width: 25%;
            padding: 0 15px;
            float: left;
        }

        .leftsmall {
            font-size: 14px;
        }

        .leftsmall > div {
            padding: 10px 0;
        }

        .leftsmall .input-group {
            margin-bottom: 10px;
        }

        .leftsmall .input-group-addon {
            background-color: #fff;
            border: none;
        }

        .leftsmall .form-control {
            border-radius: 0;
        }

        .leftsmall .btn-primary {
            background-color: #003B95;
            border-color: #003B95;
            width: 100%;
            border-radius: 0;
            font-size: 16px;
        }

        .leftsmall .btn-primary:hover {
            background-color: #428BCA;
            border-color: #428BCA;
        }

        /* Right column */
        #right {
            width: 75%;
            padding: 0 15px;
            float: right;
        }

        .maps-overlay {
            position: relative;
            height: 100%;
            background: #F9F9F9;
            border: 1px solid #E5E5E5;
        }

        border {
            border-style: solid;
            border-width: medium;
        }


        .score_blue_pattern {
            display: inline-block;
            border-radius: 5px 5px 5px 0;
            height: 30px;
            min-width: 30px;
            width: 30px;
            align-items: center;
            background: #003580;
            color: #fff;
            justify-content: center;
            vertical-align: center;
            text-align: center;
            font-size: 15px;
            line-height: 30px;
            margin-right: 14px;
            float: right;
        }

        .small_facs {
            display: inline-block;
            padding-right: 6px;
        }

        .little_icon {
            display: inline-block;
            height: 16px;
            width: 16px;
            vertical-align: -3px;
        }

        .little_font {
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
        }

        .small_facs {
            display: inline-block;
            padding-right: 6px;
        }

        .hotel_card {
            border: 1px solid #c6c6c6;
            margin-top: 8px;
            margin-bottom: 8px;
            padding: 10px
        }

        .hotel_title {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            color: #0071c2;
            display: inline-block;
            margin-bottom: 5px;
        }

        .sus_part {
            background-color: #e7fde9;
            border-color: transparent;
            color: #008009;
            width: 160px;
            height: 23px;
            margin-top: 5px;
        }

        .leaf {
            width: 16px;
            height: 16px;
            display: inline-block;
            color: #008009;
            fill: #008009;
            vertical-align: -2px;
            padding-top: 3px;
        }

        .comment {
            font-size: 16px;
            font-weight: 500;
            padding-right: 5px;
            text-align: center;
            padding-top: 5px;
            float: right;
        }

        .card_rooms {
            font-size: 12px;
            display: inline-block;
            padding-left: 10px;
            border-left: 2px solid #e7e7e7;
        }

        /*.sp_line {*/
        /*    background:#E7E7E7;!*背景色为浅灰色*!*/
	    /*    width:0.8px;!*设置宽高*!*/
	    /*    height:45px;*/
	    /*    position:relative;!*调整位置*!*/
	    /*    float:left;!*让此div与前面的并排显示*!*/
        /*    display: inline-block;*/
        /*}*/
.dropdown{
            position: relative;
            display: inline-block;
        }
        .dropbtn{
            background-color: #003B95;
            color: white;
            font-size: 16px;
            padding: 16px;
            border: none;
            cursor: pointer;
        }
        .dropdown-content{
            display: none;
            position: absolute;
            background-color: white;
            width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .dropdown-content a{
            color: black;
            padding: 12px 16px;
            text-decoration:  none;
            display: block;
        }
        .dropdown-content a:hover{
            background-color: #b9def0;
        }
        .dropdown:hover .dropdown-content{
            display: block;
        }
        .dropdown:hover .dropbtn{
            background-color: #003B95;
        }
        .grey_font {
            color: #6b6b6b;
            font-size: 12px;
            font-weight: 400;
            text-align: right;
        }

        .reservation_info {
            display: inline-block;
            float: right;
            padding-right: 20px;
        }

        .big-font {
            font-size: 20px;
            font-weight: 530;
            text-align: right;
        }
        .template_hide{
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" style="background-color: #003b95   ">

    <div class="container-fluid ">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="container">
                <a class="navbar-brand " href="https://www.booking.cn">Booking.com</a>
            </div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><p class="navbar-text ">上线我的住宿</p></li>
                <li><div class="dropdown"style="z-index: 9999">
                    <button class="dropbtn">欢迎预定！</button>
                    <div class="dropdown-content">
                        <a href="/fake">查看订单 </a>
                        <a href="/logout">退出 </a>
                    </div>
                </div></li>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<ul class="nav nav-tabs ">
    <li role="presentation" class="active " style="margin-left:20px"><a href="#"><span class="glyphicon glyphicon-bed"
                                                                                       aria-hidden="true"></span>住宿</a>
    </li>
    <li role="presentation"><a
            href="https://www.booking.com/attractions/index.zh-cn.html?aid=1662037&amp;sid=dbdb80c0ef230f97a76c0cc16caff245"
            style="color:black"><span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>景点</a></li>
    <li role="presentation"><a
            href="https://www.booking.com/attractions/index.zh-cn.html?aid=1662037&amp;sid=dbdb80c0ef230f97a76c0cc16caff245"
            style="color:black"><span class="glyphicon glyphicon-plane" aria-hidden="true"></span>机票</a></li>
    <li role="presentation"><a
            href="https://www.booking.com/attractions/index.zh-cn.html?aid=1662037&amp;sid=dbdb80c0ef230f97a76c0cc16caff245"
            style="color:black"><span class="glyphicon glyphicon-road" aria-hidden="true"></span>出租车</a></li>
</ul>
<!--条幅-->
<div class="container">
    <ol class="breadcrumb">
        <li><a href="http://127.0.0.1:5000/header">首页</a></li>
        <li><a href="#">中国</a></li>
        <li><a href="#">省</a></li>
        <li><a href="#">城市</a></li>
        <li class="active">旅店</li>
    </ol>
    <div id="left" class="rlt-left leftsmall" role="complementary">
        <!--要为这个创建一个style-->
        <div class=".fca8fcd83b " style="background: #febb02">
            <div>境外特价搜不停</div>
        </div>

        <div class=".fca8fcd83b " style="background: #ffc489">
            <div>
                <div class="d8eab2cf7f e2a710e162">目的地/住宿名称：</div>
                <div class="input-group " style="width:90%;padding-left:20px">
                    <span class="input-group-addon"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>

                    <input type="text" class="form-control " placeholder="城市名" aria-describedby="basic-addon1">
                </div>

            </div>

            <div>
                <div class="d8eab2cf7f e2a710e162">入住日期：</div>
                <div class="input-group" style="width:90%;padding-left:20px">
                    <span class="input-group-addon"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>

                    <input id='mydatepicker' type="text" class="form-control" placeholder="入住日期"
                           aria-describedby="basic-addon1">
                </div>
            </div>

            <div>
                <div class="d8eab2cf7f e2a710e162">退房日期：</div>
                <div class="input-group" style="width:90%;padding-left:20px">
                    <span class="input-group-addon"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>

                    <input id='mydatepicker1' type="text" class="form-control" placeholder="退房日期"
                           aria-describedby="basic-addon1">
                </div>
            </div>
            <div class=".fca8fcd83b text-center">
                <div>
                    <input type="submit" value="搜特价"
                           style="font-size: 25px;color:#fff;background:#0071c2;border-radius: 10px">
                </div>
            </div>
        </div>


        <div id="flexCheckDefault">
            <!--住宿类型-->
            <!--怎么给这个加框子啊-->
            <form name="chooseform" method="post" >
            <div id="roomType" style="border: solid 2px white ; border-radius: 5px ;background-color: #F5F5F5">
                <div>住宿类型</div>
                <!--form name="form1" title="酒店类型:"-->

                    <input name="apartment" type="checkbox" value='apartment' >公寓<div style="float: right">{{type.公寓}}</div><br>
                    <input name="hotel" type="checkbox" value='hotel' >酒店<div style="float: right">{{type.酒店}}</div><br>
                    <input name="guestroom" type="checkbox" value='guestroom'}>旅馆<div style="float: right">{{type.旅馆}}</div><br>
                    <input name="homestay" type="checkbox" value='homestay'}>民宿<div style="float: right">{{type.民宿}}</div><br>

                <!--/form-->
            </div>
            <div id="point" style="border: solid 2px white ; border-radius: 5px ;background-color: #F5F5F5">
                <div>酒店评分</div>
                <!--form name="form2" title="酒店评分:"-->

                   <input style="display:inline" name="fabulous" type="checkbox" value='9'>好极了：9分以上<div style="display:inline;float: right">
                {{point.9}}</div><br>
                    <input name="excellent" type="checkbox" value='8' > 非常好：8分以上<div style="float: right">{{point.8}}</div><br>
                    <input name="great" type="checkbox" value='7'>好：7分以上<div style="float: right">{{point.7}}</div><br>
                    <input name="enjoyable" type="checkbox" value='6' >令人愉悦：6分以上<div style="float: right">{{point.6}}</div><br>
                <!--/form-->
            </div>
            <div id="distance" style="border: solid 2px white ; border-radius: 5px ;background-color: #F5F5F5">
                <div>距离：</div>
                <!--form name="form3" title="距离:"-->
                    <input name="near" type="checkbox" value='1' >1公里以内<div style="float: right">{{dis.1}}</div><br>
                    <input name="close" type="checkbox" value='3'>3公里以内<div style="float: right">{{dis.3}}</div><br>
                    <input  name="moderate" type="checkbox" value='5'>5公里以内<div style="float: right">{{dis.5}}</div><br>
               <!--/form-->
            </div>
             </form>
            <script>

                $("#flexCheckDefault").change(function () {
                    var searchresult = ""
                    //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
                    $.each($('input:checkbox:checked'), function () {
                        searchresult += $(this).val()
                    });
                    window.alert("你选了" + $('input[type=checkbox]:checked').length + "个,其中有" + searchresult)
                     document.chooseform.submit()
                })
            </script>
            <!--住宿评级-->
            <!--设施-->
            <!--取消政策-->
            <!--品牌-->

        </div>
    </div>
    <div id="right" class="rlt-right maps-overlay" role="main">

        <h3 id="welcometittle">
            <!--html接收前端简单数据的方法,此处可行-->
            {{test[0]}}：共有{{test[1]}}条数据
        </h3>

        <div>
            <form name="myform" id="myform" method="post" >
<select style="width: 150px;height: 40px"  id="sortOrder" name="sortOrder" onchange="document.myform.submit()" >
   <option  value="0">默认排序</option>
    <option  value="1">最低价格</option>
    <option  value="2">可持续等级</option>
    <option  value="3">距离最近</option>
    <option value="4">评分最高</option>
</select>
            </form>
        </div>
        <!--组件框，内置小组件，后面的问题组件理论上就是要放在这个里面-->
        <div id="rightcomponent" class="row clearfix" style="margin:10px">

            <div class="hotel_card template_hide" id="h_cards">
                <div class="row">
                    <div>
                        <div class="col-lg-3">
                            <div style="display: inline-block">
                                <img data-src="holder.js/100%x180" alt="160x160"
                                     style="height: 200px; width: 200px; "
                                     src="../static/img/image/20.jpg"
                                     data-holder-rendered="true">
                            </div>
                        </div>
                        <div style="display: inline-block;padding-left: 30px;width: 600px;height: 200px">
                            <div style="display: inline-block">
                                <p class="hotel_title">南京金轮万怡酒店</p>
                                <span aria-hidden="true" style="fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>
                                <span aria-hidden="true" style="fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>
                                <span aria-hidden="true" style="fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>
                                <span aria-hidden="true" style="fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>
                                <span aria-hidden="true" style="fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>
                            </div>
                            <div style="display: inline-block">
                            <span aria-expanded="false" class="b6dc9a9e69 ee74cdff9b ec1b6253a6 fe3639fe67"
                                  aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                          viewBox="0 0 128 128" style="vertical-align: -6px"><path
                                    fill="#FEBB02"
                                    d="M112 8H16a8 8 0 0 0-8 8v96a8 8 0 0 0 8 8h96a8 8 0 0 0 8-8V16a8 8 0 0 0-8-8zM48 96H24V58h24zm56-25a8.697 8.697 0 0 1-2 6 8.903 8.903 0 0 1 1 4 6.9 6.9 0 0 1-5 7c-.5 4-4.8 8-9 8H56V58l10.3-23.3a5.4 5.4 0 0 1 10.1 2.7c-.078.923-.28 1.831-.6 2.7L72 52h23c4.5 0 9 3.5 9 8a9.2 9.2 0 0 1-2 5.3 7.5 7.5 0 0 1 2 5.7z"></path></svg></span>
                            </div>
                            <div aria-label="评分9.5" class="score_blue_pattern">9.5</div>
                            <div class="comment">好</div>
                            <div style=" font-size: 12px;font-weight:400;padding-top: -5px">离中心地区<span
                                    aria-expanded="false" data-testid="distance">12.9</span>千米
                            </div>
                            <div class="sus_part">
                                            <span class="leaf" style="margin-left: 5px" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94"><path
                                                        d="M59.114 77.973c13.595-12.765 29.61-60.64 23.626-66.555-6.019-6.088-53.686 9.893-67.35 23.384-10.689 10.585-11.346 29.68-1.487 40.784l42.236-42.064c1.315-1.28 3.079-1.107 4.047-.138 1.004.968 1.453 2.802-.138 4.324L21.409 76.174 9.752 87.797l-.415.415c-.277.276-.45.553-.554.9-.38 1.002-.173 2.213.623 3.009 1.107 1.141 2.94 1.141 4.082 0l9.27-9.202c11.623 6.434 25.91 4.878 36.356-4.946Z"></path>
                                                </svg>
                                            </span>
                                <span class="leaf" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94"><path
                                                        d="M59.47 78.707c13.523-12.983 29.235-61.434 23.202-67.39-6.066-6.124-53.665 10.34-67.222 24.058-10.64 10.741-11.17 30.048-1.26 41.19l-8.32 8.433-.132.133c-.298.335-.43.603-.563.97-.365 1.038-.166 2.21.663 3.046a2.862 2.862 0 0 0 4.077 0l8.386-8.5c12.297 10.039 29.335 9.47 41.201-1.94h-.033Zm-37.655-1.673 38.417-39.049c1.59-1.54 1.094-3.38.1-4.35-.995-1.004-2.785-1.171-4.078.167l-38.517 39.15c-6-8.265-8.353-24.025 1.69-33.394 17.734-16.563 55.157-24.192 59.168-24.126.53 1.874-6.795 41.826-23.203 59.193-10.54 11.142-25.258 8.198-33.61 2.409h.032Z"></path></svg>
                                            </span>
                                <span class="leaf" aria-hidden="true"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94"><path
                                        d="M59.47 78.707c13.523-12.983 29.235-61.434 23.202-67.39-6.066-6.124-53.665 10.34-67.222 24.058-10.64 10.741-11.17 30.048-1.26 41.19l-8.32 8.433-.132.133c-.298.335-.43.603-.563.97-.365 1.038-.166 2.21.663 3.046a2.862 2.862 0 0 0 4.077 0l8.386-8.5c12.297 10.039 29.335 9.47 41.201-1.94h-.033Zm-37.655-1.673 38.417-39.049c1.59-1.54 1.094-3.38.1-4.35-.995-1.004-2.785-1.171-4.078.167l-38.517 39.15c-6-8.265-8.353-24.025 1.69-33.394 17.734-16.563 55.157-24.192 59.168-24.126.53 1.874-6.795 41.826-23.203 59.193-10.54 11.142-25.258 8.198-33.61 2.409h.032Z"></path></svg>
                                            </span>
                                <span style="font-size: 12px;font-weight: 400">可持续旅行1级</span>
                            </div>

                            <div style="padding-top: 10px">
                                <div class="sp_line"></div>
                                <div class="card_rooms">
                                    <div style="font-size: 12px;font-weight: 700;padding-top: 5px">
                                        <span>标准双床间 - 禁烟 </span></div>
                                    <div style="font-size: 12px;font-weight: 400;padding-top: 1px"><span>4张床 (2张单人床, 2张双人床)</span>
                                    </div>
                                    <div style="font-size: 12px;font-weight: 400;color: #008009;padding-top: 10px">
                                        <div> 包括早餐</div>
                                        <div>免费取消 • 无需预付</div>
                                        <div>计划有变可取消 - 锁定优惠价趁现在</div>
                                    </div>
                                </div>
                                <div class="reservation_info">
                                    <div class="fd1924b122 d4741ba240" data-testid="availability-rate-information">
                                        <div data-testid="price-for-x-nights" class="grey_font ">{{day}}晚，{{adult}}2位成人
                                        </div>
                                        <div class="big-font">508元</div>
                                        <div data-testid="taxes-and-charges" class=" grey_font">+149元税费及其他费用
                                        </div>
                                    </div>
                                    <div style="display:inline-grid;text-align: -moz-right; margin-top: 8px;float:right">
                                        <button type="submit" name="list_choose" data-bui-component="Popover"
                                                data-popover-position="top end"
                                                style="width: 130px;border:1px solid #0071c2;border-radius: 2px;background-color: #0071c2;color: #fff;vertical-align: middle;fill: #fff">
                                            <span style="display: inline-block;line-height: 36px"> 查看可订选项 </span>
                                            <span>
                        <svg height="24" role="presentation" width="24" viewBox="0 0 24 24" aria-hidden="true"
                             focusable="false" style="vertical-align: -7px"><path
                                d="M9.45 6c.2 0 .39.078.53.22l5 5c.208.206.323.487.32.78a1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>
                        </svg>
                    </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>


        <div class="row clearfix" style="margin: 10px ;text-align:center">
            <ul class="pagination">
                <li id="pre">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

            </ul>
        </div>
    </div>


</div>

<div style="border:solid 2px black"></div>

<div class="footerconstraint-inner container" style="margin-top: 10px">
    <div id="footer" class="footer-navigation-links-wrapper clearfix" role="navigation">
        <div id="footer_links" class="footer-navigation-links">
            <div class="footer-navigation-links-column footer-seo-links-to-html-sitemaps">
                <ul class="footer-navigation-links-list col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/country.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            国家/地区
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/region.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            区域
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/city.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            城市
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/district.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            区
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/airport.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            机场
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/hotel/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            酒店
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/landmark.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            周边地标/景点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list footer-seo-links-to-index col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/booking-home/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="booking-home">
                            民宿短租
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/apartments/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="apartments">
                            公寓
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/resorts/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="resorts">
                            度假村
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/villas/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="villas">
                            别墅
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/hostels/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="hostels">
                            青旅
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/bed-and-breakfast/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="bed_and_breakfast">
                            住宿加早餐旅馆
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/guest-house/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="guest_house">
                            旅馆
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-3">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/accommodations.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="accommodations">
                            全球独特住宿
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/destination.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="destinations">
                            所有目的地
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/flights/sitemap.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="flights_destinations">
                            所有航班目的地
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/cars/sitemap.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="cars_destinations">
                            所有租车点
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/discover.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            发现精彩
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/reviews
.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc
" data-ga="seoindexlinks" class="js-reviews-footer-link">
                            客人点评
                        </a>
                    </li>
                    <div data-et-view="  BHDTJdReLLCBLZBeMbFMOFIbeDUHYKe:1 BHDTJdReLLCBLZBeMbFMOFIbeDUHYKe:3 "></div>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/extended-stays/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="extended-stays">
                            探索月租
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://booking.cn/articles.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           type="nav" location="main-site-footer" category="articles-link">
                            游记攻略
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/deals/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           title="季节和假日优惠">
                            季节和假日优惠
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/traveller-awards/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            Traveller Review Awards
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a rel="nofollow"
                           href="http://cars.booking.com/Home.do?affiliateCode=booking-com&amp;adplat=footer&amp;preflang=zh-cn"
                           target="_blank"
                           data-google-track="Click/Rental cars footer link click (loy_footer_rentalcars_copy: 0)/index"
                           data-ga-track="click|pageview:/outgoinglink/traveljigsaw/zh">
                            租车服务
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a rel="nofollow"
                           href="https://booking.cn/pxgo?url=https%3A%2F%2Fbooking.kayak.com%2Fin%3Fa%3Dbdc%252Ffooter_link%26p%3Dfooter_link%26sid%3D1c3c74b8ebf43b98ff7f33d85a5ffadc%26mc%3DCNY%26bdclc%3Dzh-cn&amp;token=UmFuZG9tSVYkc2RlIyh9Yb5s-oRzgw76bcWUd8wbcu_HQ_oNS0n5o7zQ4ALMS4xCAz2HhcKhGLwnccOLYQQwIxoA1l8Dn-u7SWMJSrnvF2SlZw8LSyUylQlCcuex9gosnb-4lO3cBh4k55cNqRMSfFPLFXGPgVPZeOUwZXy7_R3yPHWDyJSfMAqwMnH4WY9TRhY0s8ADXBtGbDLIS0T-KtRtFttcYhtDXbuQ7ipS0tb--gvkbygnAE6CDsonH1jwNNquYwxgt-fAFY4IzjwKRYif4ihrj-bn70oWjdeHkcdSByHc3aIq9e3pHTCqMCCtVtwVI2LSsPyn_XU17hLXAA&amp;aid=1633942&amp;lang=zh"
                           target="_blank" data-google-track="Click/Kayak footer link/index"
                           data-ga-track="click|pageview:/outgoinglink/kayaklink">
                            订机票
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a rel="nofollow" href="http://www.opentable.com?ref=16087" target="_blank"
                           data-google-track="Click/Opentable footer link/index"
                           data-ga-track="click|pageview:/outgoinglink/opentablelink">
                            餐厅订位
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="
https://booking.cn/affiliate-program/v2/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;utm_medium=referral&amp;utm_campaign=booking-footer&amp;utm_content=travel-agents-link&amp;utm_source=booking.com
" title="Booking.com for Travel Advisers"
                           data-ga-track="click|pageview:/internallink/partner/footer/adviserslink/index/zh-cn">
                            Booking.com缤客旅行代理机构中心
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-3">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/covid-19-booking-faqs.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            新冠肺炎（COVID-19）疫情常见问题及解答
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/about.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">关于Booking.com缤客</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/content/contact-us.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">联系我们</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/content/business-license.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">营业执照</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://secure.booking.cn/help.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;source=footer_navigation#/?source=footer_navigation"
                           data-ga-track="click|Click|Action: index|hc_entrypoint_footer_navigation">
                            客服帮助
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://partner.booking.com/en-gb?utm_campaign=footer_list&amp;utm_medium=frontend_footer&amp;utm_source=booking.com">
                            酒店自助平台
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://careers.booking.com/?utm_source=corporate&amp;utm_medium=footer"
                           data-ga-track="click|pageview:/outgoinglink/footer/careerlink/zh-cn">
                            Careers
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://sustainability.booking.com/"
                           data-ga-track="click|pageview:/outgoinglink/footer/sustainabilitylink/zh-cn">
                            可持续发展项目
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a class="tracked" data-google-track="Click/Action: about_us/press"
                           href="https://news.booking.com/zh-chs/">
                            新闻中心
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/trust-and-safety.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;utm_source=footer_menu&amp;utm_medium=web_frontend"
                           class="tracked">
                            安全旅行信息中心
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a class="tracked" data-google-track="Click/Action: about_us/investor_relations"
                           href="https://www.bookingholdings.com/">
                            投资者关系
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/terms.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            条款与条件
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://secure.booking.cn/content/complaints.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            合作伙伴申诉
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/how_we_work.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            我们如何运作
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/privacy.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            隐私和Cookie声明
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <div style="display:none">
                            <button id="ot-sdk-btn" class="ot-sdk-show-settings">点此</button>
                        </div>
                        <a href="#" class=" ot-preference-center-footer">
                            管理Cookie设置
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.bookingholdings.com/about/compliance-and-ethics/">
                            MSA声明
                        </a>
                    </li>
                    <li class="footer-navigation-link" data-ga-track="click|CSIR|CS|footer_link_contact_us">
                        <a href="https://www.booking.cn/content/contact-us.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            其他问题查询
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="#" title="
最优惠价格保证 - 核实后将予以差价补偿！
" class="
jq_tooltip
open-bpg-in-overlay-instead
">价格更放心</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery-3.6.4.min.js"></script>
<script src="../static/bootstrap-3.4.1-dist/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/dcalendar.picker.js"></script>
<script type="text/javascript">
    $('#mydatepicker').dcalendarpicker();
    $('#mydatepicker1').dcalendarpicker();
</script>
<script type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</script>

<!--分页算法-->
<script type="text/javascript">


        var orderby = ""





    var ul = document.querySelector(".pagination");
    var page_number = 10; //单页浏览的条数
    var Total_pages; //页数
    var liAll; //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页
    var pre; //上一页
    var next; //下一页
    var rightcomponent = document.querySelector("#rightcomponent")//找到组件


    function clearTable() {//换成我的组件,空框子
        rightcomponent.innerHTML = ` `
    }

    //初始加载第一页

    window.onload = function() {
        //这句看一下要不要加
       // clearTable();
        json.forEach(function (item, i) {


            console.log(item);
            var tbody = document.querySelector("#rightcomponent");//填入小组件单元

            if (i < page_number) {
                var tr = document.createElement("tr");
                tr.innerHTML = ` <div class="hotel_card" id="h_cards">
                <div class="row">
                    <div>
                        <div class="col-lg-3">
                            <div style="display: inline-block">
                                <img data-src="holder.js/100%x180" alt="160x160"
                                     style="height: 200px; width: 200px; "
                                     src="${item.img}"
                                     data-holder-rendered="true">
                            </div>
                        </div>
                        <div style="display: inline-block;padding-left: 30px;width: 600px;height: 200px">
                            <div style="display: inline-block">
                                <p class="hotel_title">${item.hname}</p> `+get_stars(item['star'])+`


                            <div aria-label="评分9.5" class="score_blue_pattern">${item.point}</div>
                            <div class="comment">`+get_comment(item['point'])+`</div>
                            <div style=" font-size: 12px;font-weight:400;padding-top: -5px">离中心地区<span
                                    aria-expanded="false" data-testid="distance">${item.dis/10}</span>千米
                            </div>
                            `+get_suslevel(item['suslevel'])+`
                            <div style="padding-top: 10px">
                                <div class="sp_line"></div>
                                <div class="card_rooms">
                                    <div style="font-size: 12px;font-weight: 700;padding-top: 5px">
                                        <span>${item.room_name}</span></div>
                                        `+bed_filter(item['bed_type'])+`
                                    </div>
                                    <div style="font-size: 12px;font-weight: 400;color: #008009;padding-top: 10px">
                                    `+bcp_filter(item['room_breakfast'],item['room_cancel'],item['rooms_advance_pay'])+`

                                    </div>
                                </div>
                                <div class="reservation_info">
                                    <div class="fd1924b122 d4741ba240" data-testid="availability-rate-information">
                                        <div data-testid="price-for-x-nights" class="grey_font ">{{day}}晚，{{adult}}位成人
                                        </div>
                                        <div class="big-font">${item.room_price}元</div>
                                        <div data-testid="taxes-and-charges" class=" grey_font">`+set_price_other(item['room_price'],item['rooms_price_other'])+`
                                        </div>
                                    </div>
                                    <div style="display:inline-grid;text-align: -moz-right; margin-top: 8px;float:right">
                                       <a href="/hotel?hid=${item.hid}"> <button type="submit" name="list_choose" data-bui-component="Popover"
                                                data-popover-position="top end"
                                                style="width: 130px;border:1px solid #0071c2;border-radius: 2px;background-color: #0071c2;color: #fff;vertical-align: middle;fill: #fff">
                                            <span style="display: inline-block;line-height: 36px">查看可订选项 </span>
                                            <span>
                        <svg height="24" role="presentation" width="24" viewBox="0 0 24 24" aria-hidden="true"
                             focusable="false" style="vertical-align: -7px"><path
                                d="M9.45 6c.2 0 .39.078.53.22l5 5c.208.206.323.487.32.78a1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>
                        </svg>
                    </span>
                                        </button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>`
                tbody.appendChild(tr);
            }


        })

//编辑导航栏
        var len = json.length; //总记录条数

        Total_pages = len % page_number == 0 ? len / page_number : len / page_number + 1; //页数

        for (var i = 1; i <= Total_pages; i++) {
            ul.innerHTML += `
            <li  id="${i}"><a href="#">${i}</a></li>
            `
        }
//加上next
        ul.innerHTML += `
                <li class="next">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
        `;
        liAll = document.querySelectorAll(".pagination li");//按钮下标
        liAll[1].childNodes[0].style.color = "red"; //初始第一页页码是红的
        //console.log([liAll])

        var pagethis = 1; //当前是第几页，目前只初始加载完，所以是第一页
        //正常页
        // console.log("Liall.length")
        // console.log(liAll.length)
        for (var i = 1; i < liAll.length - 1; i++) {
            liAll[i].onclick = function () {
                for (var j = 1; j < liAll.length - 1; j++) {
                    // liAll[j].childNodes[0].style.color = "blue"
                    // liAll[j].childNodes[0].style('background','#d9d9d9')
                }
                // liAll[i].css('background-color','#fff');
                pagethis = this.id; //获取当前是第几页
                //liAll[pagethis].childNodes[0].style.color = "red";//当前页变红
                // console.log(liAll[i])
                let start; //当页数据的起始下标
                let end; //当页数据的结束下标
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number -1;
                    if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
                        end = json.length - 1;
                    }
                } else {//第一页
                    start = 0;
                    end = page_number - 1;
                }
                console.log(start)
                console.log(end)
                clearTable();
                var tbody = document.querySelector("#rightcomponent");
                // liAll[i].childNodes[0].style.color="#0071c2";
                json.forEach(function (item, i) {
                    // console.log(item)
//输出start和end之间的值,start和end有被成功赋值吗
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        var s = get_stars(item['star'])
                        // console.log(s)
                        tr.innerHTML = ` <div class="hotel_card" id="h_cards">
                <div class="row">
                    <div>
                        <div class="col-lg-3">
                            <div style="display: inline-block">
                                <img data-src="holder.js/100%x180" alt="160x160"
                                     style="height: 200px; width: 200px; "
                                     src="${item.img}"
                                     data-holder-rendered="true">
                            </div>
                        </div>
                        <div style="display: inline-block;padding-left: 30px;width: 600px;height: 200px">
                            <div style="display: inline-block">
                                <p class="hotel_title">${item.hname}</p>`+get_stars(item['star'])+`

                            <div aria-label="评分9.5" class="score_blue_pattern">${item.point}</div>
                            <div class="comment">`+get_comment(item['point'])+`</div>
                            <div style=" font-size: 12px;font-weight:400;padding-top: -5px">离中心地区<span
                                    aria-expanded="false" data-testid="distance">${item.dis/10}</span>千米
                            </div>
                            `+get_suslevel(item['suslevel'])+`

                            <div style="padding-top: 10px">
                                <div class="sp_line"></div>
                                <div class="card_rooms">
                                    <div style="font-size: 12px;font-weight: 700;padding-top: 5px">
                                        <span>${item.room_name}</span></div>
                                   `+bed_filter(item['bed_type'])+`</div>
                                    <div style="font-size: 12px;font-weight: 400;color: #008009;padding-top: 10px">
                                        `+bcp_filter(item['room_breakfast'],item['room_cancel'],item['rooms_advance_pay'])+`
                                    </div>
                                </div>
                                <div class="reservation_info">
                                    <div class="fd1924b122 d4741ba240" data-testid="availability-rate-information">
                                        <div data-testid="price-for-x-nights" class="grey_font ">{{day}}晚，{{adult}}位成人
                                        </div>
                                        <div class="big-font">${item.room_price}元</div>
                                        <div data-testid="taxes-and-charges" class=" grey_font">`+set_price_other(item['room_price'],item['rooms_price_other'])+`
                                        </div>
                                    </div>
                                    <div style="display:inline-grid;text-align: -moz-right; margin-top: 8px;float:right">
                                       <a href="/hotel?hid=${item.hid}"> <button type="submit" name="list_choose" data-bui-component="Popover"
                                                data-popover-position="top end"
                                                style="width: 130px;border:1px solid #0071c2;border-radius: 2px;background-color: #0071c2;color: #fff;vertical-align: middle;fill: #fff">
                                            <span style="display: inline-block;line-height: 36px"> 查看可订选项 </span>
                                            <span>
                        <svg height="24" role="presentation" width="24" viewBox="0 0 24 24" aria-hidden="true"
                             focusable="false" style="vertical-align: -7px"><path
                                d="M9.45 6c.2 0 .39.078.53.22l5 5c.208.206.323.487.32.78a1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>
                        </svg>
                    </span>
                                        </button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>`
                        tbody.appendChild(tr);
                    }
                })

            }
        }
        pre = document.querySelector("#pre") //上一页
        next = document.querySelector(".next") //下一页
        pre.onclick = function () {
//请看这里
            //这里是正常的，pagethis可以正常读到，可以正常实现功能
            if (pagethis != 1) { //当前页数不等于1时执行上一页
                pagethis--;
                for (var j = 1; j < liAll.length - 1; j++) {
                    // liAll[j].childNodes[0].style.color = "blue"
                }
                //liAll[pagethis].childNodes[0].style.color = "red";
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number -1;
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }
                console.log(start)
                console.log(end)
                clearTable();
                var tbody = document.querySelector("#rightcomponent");
                json.forEach(function (item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = ` <div class="hotel_card" id="h_cards">
                <div class="row">
                    <div>
                        <div class="col-lg-3">
                            <div style="display: inline-block">
                                <img data-src="holder.js/100%x180" alt="160x160"
                                     style="height: 200px; width: 200px; "
                                     src="${item.img}"
                                     data-holder-rendered="true">
                            </div>
                        </div>
                        <div style="display: inline-block;padding-left: 30px;width: 600px;height: 200px">
                            <div style="display: inline-block">
                                <p class="hotel_title">${item.hname}</p>
                               `+get_stars(item['star'])+`

                            <div aria-label="评分9.5" class="score_blue_pattern">${item.point}</div>
                            <div class="comment">`+get_comment(item['point'])+`</div>
                            <div style=" font-size: 12px;font-weight:400;padding-top: -5px">离中心地区<span
                                    aria-expanded="false" data-testid="distance">${item.dis/10}</span>千米
                            </div>
                            `+get_suslevel(item['suslevel'])+`

                            <div style="padding-top: 10px">
                                <div class="sp_line"></div>
                                <div class="card_rooms">
                                    <div style="font-size: 12px;font-weight: 700;padding-top: 5px">
                                        <span>${item.room_name}</span></div>
                                    `+bed_filter(item['bed_type'])+`</div>
                                    <div style="font-size: 12px;font-weight: 400;color: #008009;padding-top: 10px">
                                        `+bcp_filter(item['room_breakfast'],item['room_cancel'],item['rooms_advance_pay'])+`
                                    </div>
                                </div>
                                <div class="reservation_info">
                                    <div class="fd1924b122 d4741ba240" data-testid="availability-rate-information">
                                        <div data-testid="price-for-x-nights" class="grey_font ">{{day}}晚，{{adult}}位成人
                                        </div>
                                        <div class="big-font">${item.room_price}元</div>
                                        <div data-testid="taxes-and-charges" class=" grey_font">`+set_price_other(item['room_price'],item['rooms_price_other'])+`
                                        </div>
                                    </div>
                                    <div style="display:inline-grid;text-align: -moz-right; margin-top: 8px;float:right">
                                     <a href="/hotel?hid=${item.hid}">   <button type="submit" name="list_choose" data-bui-component="Popover"
                                                data-popover-position="top end"
                                                style="width: 130px;border:1px solid #0071c2;border-radius: 2px;background-color: #0071c2;color: #fff;vertical-align: middle;fill: #fff">
                                            <span style="display: inline-block;line-height: 36px"> 查看可订选项 </span>
                                            <span>
                        <svg height="24" role="presentation" width="24" viewBox="0 0 24 24" aria-hidden="true"
                             focusable="false" style="vertical-align: -7px"><path
                                d="M9.45 6c.2 0 .39.078.53.22l5 5c.208.206.323.487.32.78a1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>
                        </svg>
                    </span>
                                        </button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>`
                        // console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            } else alert("已经是第一页")
        }
        next.onclick = function () {
//请看这里
            //这里就不正常了，pagethis就读不到了NAN了，怎会如此，我不理解
            //如果实在改不了到时候展示汇报的时候就回避一下好了

            if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页
                pagethis++;
                for (var j = 1; j < liAll.length - 1; j++) {
                    // liAll[j].childNodes[0].style.color = "blue"
                }
                //liAll[pagethis].childNodes[0].style.color = "red";
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number-1;
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }
                console.log(start)
                console.log(end)
                clearTable();
                var tbody = document.querySelector("#rightcomponent");
                json.forEach(function (item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr")
                        tr.innerHTML=` <div class="hotel_card" id="h_cards">
                <div class="row">
                    <div>
                        <div class="col-lg-3">
                            <div style="display: inline-block">
                                <img data-src="holder.js/100%x180" alt="160x160"
                                     style="height: 200px; width: 200px; "
                                     src="${item.img}"
                                     data-holder-rendered="true">
                            </div>
                        </div>
                        <div style="display: inline-block;padding-left: 30px;width: 600px;height: 200px">
                            <div style="display: inline-block">
                                <p class="hotel_title">${item.hname}</p>
                                `+get_stars(item['star'])+`

                            <div aria-label="评分9.5" class="score_blue_pattern">${item.point}</div>
                            <div class="comment">`+get_comment(item['point'])+`</div>
                            <div style=" font-size: 12px;font-weight:400;padding-top: -5px">离中心地区<span
                                    aria-expanded="false" data-testid="distance">${item.dis/10}</span>千米
                            </div>
                            `+get_suslevel(item['suslevel'])+`

                            <div style="padding-top: 10px">
                                <div class="sp_line"></div>
                                <div class="card_rooms">
                                    <div style="font-size: 12px;font-weight: 700;padding-top: 5px">
                                        <span>${item.room_name}</span></div>
                                    `+bed_filter(item['bed_type'])+`</div>
                                    <div style="font-size: 12px;font-weight: 400;color: #008009;padding-top: 10px">
                                        `+bcp_filter(item['room_breakfast'],item['room_cancel'],item['rooms_advance_pay'])+`
                                    </div>
                                </div>
                                <div class="reservation_info">
                                    <div class="fd1924b122 d4741ba240" data-testid="availability-rate-information">
                                        <div data-testid="price-for-x-nights" class="grey_font ">1晚，2位成人
                                        </div>
                                        <div class="big-font">${item.room_price}</div>
                                        <div data-testid="taxes-and-charges" class=" grey_font">`+set_price_other(item['room_price'],item['rooms_price_other'])+`
                                        </div>
                                    </div>
                                    <div style="display:inline-grid;text-align: -moz-right; margin-top: 8px;float:right">
                                       <a href="/hotel?hid=${item.hid}"> <button type="submit" name="list_choose" data-bui-component="Popover"
                                                data-popover-position="top end"
                                                style="width: 130px;border:1px solid #0071c2;border-radius: 2px;background-color: #0071c2;color: #fff;vertical-align: middle;fill: #fff">
                                            <span style="display: inline-block;line-height: 36px">查看可订选项</span>
                                            <span>
                        <svg height="24" role="presentation" width="24" viewBox="0 0 24 24" aria-hidden="true"
                             focusable="false" style="vertical-align: -7px"><path
                                d="M9.45 6c.2 0 .39.078.53.22l5 5c.208.206.323.487.32.78a1.1 1.1 0 0 1-.32.78l-5 5a.75.75 0 0 1-1.06 0 .74.74 0 0 1 0-1.06L13.64 12 8.92 7.28a.74.74 0 0 1 0-1.06.73.73 0 0 1 .53-.22zm4.47 5.72zm0 .57z"></path>
                        </svg>
                    </span>
                                        </button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>`


                        // console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            } else alert("已经是最后一页，没有更多结果")
        }

    }
    function get_stars(nums){
        let stars=``;
        for (var i=0;i<nums;i++)
        {
            stars+=`<span aria-hidden="true" style=" padding-right: 2px;fill:#febb02"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   viewBox="0 0 24 24" width="12px"
                                                                                   height="12px"><path
                                        d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12z"></path></svg></span>`
        }
        if(nums>=4){
            stars +=`</div>
                            <div style="display: inline-block">
                            <span aria-expanded="false" class="b6dc9a9e69 ee74cdff9b ec1b6253a6 fe3639fe67"
                                  aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                          viewBox="0 0 128 128" style="vertical-align: -6px"><path
                                    fill="#FEBB02"
                                    d="M112 8H16a8 8 0 0 0-8 8v96a8 8 0 0 0 8 8h96a8 8 0 0 0 8-8V16a8 8 0 0 0-8-8zM48 96H24V58h24zm56-25a8.697 8.697 0 0 1-2 6 8.903 8.903 0 0 1 1 4 6.9 6.9 0 0 1-5 7c-.5 4-4.8 8-9 8H56V58l10.3-23.3a5.4 5.4 0 0 1 10.1 2.7c-.078.923-.28 1.831-.6 2.7L72 52h23c4.5 0 9 3.5 9 8a9.2 9.2 0 0 1-2 5.3 7.5 7.5 0 0 1 2 5.7z"></path></svg></span>
                            </div>`
        }else{
             stars +=`</div>`
        }
        return stars;
    }
    function get_comment(point){
        var com =""
        if (point>=6 && point<7) {
            com = "令人愉悦";
        }else if(point>=7 && point<8){
            com="好";
        }else if(point>=8 && point<9){
            com="非常好";
        }else if(point>=9){
            com="好极了";
        }
        return com;
    }
    function get_suslevel(sus){

        var sus_html=``;
        if (sus>0){

            sus_html+=`<div class="sus_part">`;
            for(var i=0;i<sus;i++)
            {
                sus_html+=`<span class="leaf" style="margin-left: 5px" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94"><path
                                                        d="M59.114 77.973c13.595-12.765 29.61-60.64 23.626-66.555-6.019-6.088-53.686 9.893-67.35 23.384-10.689 10.585-11.346 29.68-1.487 40.784l42.236-42.064c1.315-1.28 3.079-1.107 4.047-.138 1.004.968 1.453 2.802-.138 4.324L21.409 76.174 9.752 87.797l-.415.415c-.277.276-.45.553-.554.9-.38 1.002-.173 2.213.623 3.009 1.107 1.141 2.94 1.141 4.082 0l9.27-9.202c11.623 6.434 25.91 4.878 36.356-4.946Z"></path>
                                                </svg>
                                            </span>`
            }
            for(var j=sus;j<3;j++){
                sus_html+=`<span class="leaf" aria-hidden="true">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94"><path
                                                        d="M59.47 78.707c13.523-12.983 29.235-61.434 23.202-67.39-6.066-6.124-53.665 10.34-67.222 24.058-10.64 10.741-11.17 30.048-1.26 41.19l-8.32 8.433-.132.133c-.298.335-.43.603-.563.97-.365 1.038-.166 2.21.663 3.046a2.862 2.862 0 0 0 4.077 0l8.386-8.5c12.297 10.039 29.335 9.47 41.201-1.94h-.033Zm-37.655-1.673 38.417-39.049c1.59-1.54 1.094-3.38.1-4.35-.995-1.004-2.785-1.171-4.078.167l-38.517 39.15c-6-8.265-8.353-24.025 1.69-33.394 17.734-16.563 55.157-24.192 59.168-24.126.53 1.874-6.795 41.826-23.203 59.193-10.54 11.142-25.258 8.198-33.61 2.409h.032Z"></path></svg>
                                            </span>`
            }
            sus_html+=`<span style="font-size: 12px;font-weight: 400">可持续旅行`+sus+ `级</span>
                            </div>`
        }
        return sus_html;
    }
    function bed_filter(bed){
        var bed_html =``
        if (bed!==null){
            bed_html+=`<div style="font-size: 12px;font-weight: 400;padding-top: 1px"><span>`+bed+`</span>`
        }else{
            bed_html+=`<div style="font-size: 12px;font-weight: 400;padding-top: 1px"><span></span>`
        }
        return bed_html;
    }
    function bcp_filter(bre,cancel,pre){
        var bcp_html=``;
        var reg=/\d/;
        if(bre !=null) {
            if (bre.search("含早") != -1) {
                bcp_html += `<div>包括早餐</div>`;
            }else if(!reg.test(bre)){
                bcp_html += `<div>`+bre.replace('+',' • ')+`</div>`;
            }
        }
        if(cancel!=null&& pre!=null&& cancel.search("免费取消")!=-1 && pre.search("无需预付")!=-1)
        {
            bcp_html+='<div>免费取消 • 无需预付</div>';
            bcp_html+='<div>计划有变可取消 - 锁定优惠价趁现在</div>';
        }else if(cancel!=null&& pre!=null&&cancel.search("免费取消")!=-1 && pre.search("无需预付")==-1){
            bcp_html+='<div>免费取消 </div>';
            bcp_html+='<div>计划有变可取消 - 锁定优惠价趁现在</div>';
        }
        else if(cancel!=null&& pre!=null&&cancel.search("免费取消")==-1 && pre.search("无需预付")!=-1){
            bcp_html+='<div>无需预付 </div>';
        }else if(cancel!=null &&cancel.search("免费取消")!=-1)
        {
            bcp_html+='<div>免费取消 </div>';
            bcp_html+='<div>计划有变可取消 - 锁定优惠价趁现在</div>';
        }else if(pre!=null&& pre.search("无需预付")!=-1)
        {
            bcp_html+='<div>无需预付 </div>';
        }
        return bcp_html;
    }

    function set_price_other(p,p_other){
        var pri_oth_html=``;
        var reg=/\d/;
        if(p_other==null){
            pri_oth_html+=`含税费及其他费用`;
        }
        else {
            if(p_other.search("税费及其他费用") != -1){
                pri_oth_html+=p_other;
            }else if(p_other.search("元") != -1&& reg.test(p_other)){
                console.log(p_other)
                console.log(p_other.replace(/[^\d]/g, ""))
                var num_po= Number(p_other.replace(/[^\d]/g, ""));
                console.log(num_po)
                var pri_o =num_po - p;
                if(pri_o<=0)
                {
                    pri_oth_html+=`含税费及其他费用`;
                }else{
                    pri_oth_html+=`+`+pri_o+`元税费及其他费用`
                }
            }else{
                 pri_oth_html+=`含税费及其他费用`;
            }
        }
        return pri_oth_html;
    }
</script>
</body>
</html>
